<template>
  <button
    class="TButtonGroup"
    :class="customClass"
    :style="customStyle"
    :type="type"
    :id="id"
    :disabled="disabled"
    :open-type="openType"
    @click.stop="(e) => (isOpenDebounce ? submit(e) : NoDebounceSubmit())"
  >
    <view class="btnC" :class="{ isLoading: loading }">
      <view v-if="loading" class="ant-iconfont icon-loading-3-quarters fz-16 mr-5"></view>
      <view v-if="icon" class="ali-icon" :class="{ 'mr-5': !!text }" v-html="icon"></view>
      <view class="btn-text">{{ text }}</view>
    </view>
  </button>
</template>

<script setup lang="ts">
  import { useDebounceFn } from '@/hooks/core/useDebounceFn';
  import { propTypes } from '@/utils/propTypes';
  import { type PropType, type CSSProperties } from 'vue';
  /**
   * 按钮组内的按钮间隔,需在按钮组件出增加class="gutter-btn"
   * 纯图标按钮 text传入空字符
   * icon传入html,例: icon=`<div class="ali-icon fz-20">&#xe61f;</div>`
   */

  const props = defineProps({
    text: propTypes.string, // 按钮文字
    type: {
      type: String as PropType<JSX.IntrinsicElements['button']['type']>,
      default: 'none',
    },
    disabled: {
      type: Boolean as PropType<JSX.IntrinsicElements['button']['disabled']>,
      default: false,
    },
    id: propTypes.string, // 按钮id
    openType: String as PropType<JSX.IntrinsicElements['button']['openType']>,
    loading: propTypes.bool.def(false),
    customClass: propTypes.string, // 按钮类名,需全局类名 例如: h-44 linh-44
    customStyle: {
      type: Object as PropType<CSSProperties>,
      default: () => ({}),
    }, // 按钮样式
    icon: propTypes.string.def(''),
    /** 防抖函数是否立即触发 */
    immediate: propTypes.bool.def(true),
    isOpenDebounce: propTypes.bool.def(true),
  });

  const emit = defineEmits<{ (e: 'click'): void }>();

  const submit = useDebounceFn(
    () => {
      !props.loading && emit('click');
    },
    500,
    { immediate: props.immediate },
  );

  const NoDebounceSubmit = () => {
    !props.loading && emit('click');
  };
</script>
<style scoped lang="scss">
  .TButtonGroup {
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 20rpx;
    font-size: 28rpx;
    overflow: hidden;
    box-sizing: content-box;
  }
  .btnC {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20rpx;
    .btn-text {
      flex-shrink: 0;
    }
  }
  // loading样式 start
  .btnC.isLoading {
    background-color: hsla(0, 0%, 100%, 0.35);
  }

  @keyframes rotating {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(1turn);
    }
  }
  .ant-iconfont.icon-loading-3-quarters {
    animation: rotating 2s linear infinite;
    margin-right: 10rpx;
  }
  // loading样式 end

  // 兼容老版本按钮样式, 避免重复编写
  .coopClose {
    // 合作处副按钮
    background-color: #d0f7ff;
    color: #328efb;
  }
  .borderBtn {
    // 带边框白色按钮
    background-color: #ffffff;
    color: #333;
    border: 2rpx solid #dddddd;
  }

  .cardBtn {
    // 黄色背景按钮
    background-color: #e9e3b5;
    color: #333;
  }
  .cardBlackBtn {
    // 黑色背景按钮
    background-color: #333333;
    color: #fff;
  }
</style>
